import { useEffect } from "react";
// import { getCurrentEnv } from "@/utils/env";

import { useAuth } from "@/hooks/useAuth";
import { Layout } from "@/components/Layout";

export const HomePage = () => {
  const { user } = useAuth();

  useEffect(() => {
    // console.log(getCurrentEnv());
  }, []);

  return (
    <Layout>
      <div className="container mx-auto px-4 py-8">
        {/* 主要内容 */}
        <div className="max-w-4xl mx-auto">
          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 mb-8">
            <h2 className="text-2xl font-semibold mb-4">
              欢迎使用 React 18 CLI 2025123
            </h2>
            <p className="text-gray-600 dark:text-gray-300 mb-6">
              这是一个基于 React 18 的现代化项目模板，集成了以下功能：
            </p>

            <div className="grid md:grid-cols-2 gap-6">
              <div className="space-y-4">
                <div className="flex items-start space-x-3">
                  <div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white text-sm font-bold">
                    ✓
                  </div>
                  <div>
                    <h3 className="font-semibold">Zustand 状态管理</h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      轻量级、类型安全的全局状态管理
                    </p>
                  </div>
                </div>

                <div className="flex items-start space-x-3">
                  <div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white text-sm font-bold">
                    ✓
                  </div>
                  <div>
                    <h3 className="font-semibold">React Router 路由</h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      声明式路由和导航
                    </p>
                  </div>
                </div>

                <div className="flex items-start space-x-3">
                  <div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white text-sm font-bold">
                    ✓
                  </div>
                  <div>
                    <h3 className="font-semibold">路由守卫</h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      基于认证状态的路由保护
                    </p>
                  </div>
                </div>
              </div>

              <div className="space-y-4">
                <div className="flex items-start space-x-3">
                  <div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white text-sm font-bold">
                    ✓
                  </div>
                  <div>
                    <h3 className="font-semibold">Axios 接口调用</h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      统一的HTTP请求处理
                    </p>
                  </div>
                </div>

                <div className="flex items-start space-x-3">
                  <div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white text-sm font-bold">
                    ✓
                  </div>
                  <div>
                    <h3 className="font-semibold">TypeScript 支持</h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      完整的类型安全
                    </p>
                  </div>
                </div>

                <div className="flex items-start space-x-3">
                  <div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white text-sm font-bold">
                    ✓
                  </div>
                  <div>
                    <h3 className="font-semibold">Tailwind CSS</h3>
                    <p className="text-sm text-gray-600 dark:text-gray-400">
                      实用优先的CSS框架
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* 用户信息卡片 */}
          {user && (
            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
              <h3 className="text-xl font-semibold mb-4">用户信息</h3>
              <div className="space-y-2">
                <p>
                  <span className="font-medium">ID:</span> {user.id}
                </p>
                <p>
                  <span className="font-medium">姓名:</span> {user.name}
                </p>
                <p>
                  <span className="font-medium">邮箱:</span> {user.email}
                </p>
              </div>
            </div>
          )}
        </div>
      </div>
    </Layout>
  );
};
